<template>
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search" />
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          type="primary"
          size="small"
          @click="handleSearch(1)"
          >查询</el-button
        >
        <el-button
          style="float: right; margin-right: 15px"
          size="small"
          @click="handleSearch(0)"
          >重置</el-button
        >
        <!-- 导出 -->
        <slot name="export"></slot>
      </div>
      <div style="margin-top: 25px">
        <el-form
          :inline="true"
          :model="searchQuery"
          size="small"
          :label-width="labelWidth"
        >
          <span v-for="(item, index) in queryInfo" :key="index">
            <!-- input -->
            <el-form-item v-if="item.type == 'input'" :label="item.label + ':'">
              <el-input
                v-model="searchQuery[item.key]"
                clearable
                :placeholder="item.label"
                class="input-width"
              />
            </el-form-item>
            <!-- select -->
            <el-form-item
              v-if="item.type == 'select'"
              :label="item.label + ':'"
            >
              <el-select
                v-model="searchQuery[item.key]"
                class="input-width"
                clearable
                :placeholder="'请选择' + item.label"
              >
                <el-option
                  v-for="item in item.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- 品牌名 -->
            <el-form-item
              v-if="item.type == 'brand'"
              label="品牌："
              class="inlineCt"
            >
              <el-input
                style="width: 210px"
                v-model="brandValue"
                placeholder="请选择品牌"
                :disabled="true"
              />
              <el-button
                type="primary"
                size="mini"
                icon="el-icon-search"
                class="search-btn-mini"
                @click="handleBrandDialog(item.key)"
              />
            </el-form-item>

            <!-- 分类 -->
            <el-form-item v-if="item.type == 'classify'" label="分类：">
              <category-select v-model="categoryIds" class="inputLong" />
            </el-form-item>

            <!-- daterange -->
            <el-form-item
              v-if="item.type == 'daterange'"
              :label="item.label + ':'"
            >
              <el-date-picker
                v-model="dateKey[item.key]"
                @change="(val) => daterangeChange(val, item)"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                type="daterange"
                :placeholder="'请选择' + item.label"
                value-format="yyyy-MM-dd"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </span>
        </el-form>
      </div>
    </el-card>
    <brand-dialog
      :dialogData="brandDialogData"
      :customBrandKey="customBrandKey"
      :show="brandShow"
      :reset="reset"
      @selectSucc="brandCallback"
    />
  </div>
</template>

<script>
export default {
  components: {
    brandDialog: () => import("@/components/Table/SelectBrandDialog"),
  },
  props: {
    queryInfo: {
      type: Array,
      default: () => [],
    },
    resetQuerySearch: {
      type: [String, Boolean],
      default: "",
    },
    labelWidth: {
      type: String,
      default: '160px',
    },
    brandShow: {
      // 是否调用品牌接口
      type: Boolean,
      default: false,
    },
  },
  watch: {
    // 多table切换的时候用于切换重置搜索条件
    resetQuerySearch(val) {
      this.handleSearch(false);
    },
    // 分类赋值
    categoryIds(newVal) {
      let whether = this.queryInfo.filter((item)=>{
        return item.type == 'classify'
      })
      if(whether.length<1){
       return
      }
      this.searchQuery.categoryaId = newVal[0] || "";
      this.searchQuery.categorybId = newVal[1] || "";
      this.searchQuery.categorycId = newVal[2] || "";
    },
  },
  data() {
    return {
      searchQuery: {},
      dateKey: {},
      // 分类相关
      categoryIds: [],
      // 品牌名相关
      brandDialogData: {
        dialogVisible: false,
      },
      brandValue: "",
      customBrandKey: "",
      reset: true, // 重置需要改成false清空数据
    };
  },
  created() {},
  mounted() {},
  methods: {
    // 重置还是查询
    handleSearch(flag) {
      if (!flag) {
        for (let key in this.searchQuery) {
          this.searchQuery[key] = "";
        }
        this.dateKey = {};
        this.categoryIds = [];
        this.reset = false;
        this.brandValue = ""
      }
      this.$set(this.searchQuery, "current", 1);
      this.$set(this.searchQuery, "total", 0);
      this.$emit("search", this.searchQuery);
    },
    // 品牌名
    handleBrandDialog(key) {
      this.customBrandKey = key;
      this.$set(this.brandDialogData, "dialogVisible", true);
    },
    // 品牌名callback
    brandCallback(row) {
      let { customBrandKey, name, brandId } = row;
      this.brandValue = name;
      this.$set(this.searchQuery, customBrandKey, brandId);
    },
    // 开始日期、结束日期 数据监控
    daterangeChange(val, item) {
      let { time1, time2 } = item;
      if (val) {
        this.$set(this.searchQuery, time1, val[0] + " 00:00:00");
        this.$set(this.searchQuery, time2, val[1] + " 23:59:59");
      } else {
        this.$set(this.searchQuery, time1, "");
        this.$set(this.searchQuery, time2, "");
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  // width: 203px;
}
.filter-container .input-width {
  width: 250px;
}
.search-btn-mini {
  left: -8px;
}
>>> .el-date-editor .el-range-separator {
  padding: 0 !important;
}
</style>
